<template>
    <el-dialog class="dialog" :destroy-on-close="true" :title="title" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            <el-form-item label-width="100px" label="获取模板：">
                <el-link type="primary" @click="onDownClick">
                    点击下载模板文件
                </el-link>
            </el-form-item>
            <el-form-item label="处理方式" prop="deal_way">
                <el-select v-model="formData.deal_way" placeholder="请选择处理方式" filterable>
                    <el-option v-for="item in delWayData" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文件" prop="file">
                <uxUpload ref="uxUpload" v-model="formData.file" class="upload-drag" drag :data="formData"
                action="fs/common-upload-file" :show-file-list="true"
                    :full-hide-trigger="false" :limit="1" :max-size="1024 * 1024 * 1024" :accept-type="['xlsx']">
                    <template slot="trigger">
                        <div class="img-file bg-contain"></div>
                        <div class="text">点击或将文件拖拽到这里上传</div>
                        <div class="tip">仅支持excel文件</div>
                    </template>
                </uxUpload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, Getter } from 'vuex-class';
import { mixinDialogForm } from '@/mixin/dialog/Form';
import uxUpload from '@/components/input/import/index.vue';
import userCookies from '@/utils/data/cookies';

@Component({
    mixins: [mixinDialogForm],
    components: { uxUpload }
})
export default class commonUpfile extends Vue {
    @Action('parkTenant/importData') itemEdit: any;
    @Getter("sharing/park") park: any;

    // 表单数据
    formData: any = {
        yard_sn: '',
        file: '',
        prefix: 'holder',
        deal_way: '2'
    };

    mounted() {
        this.formData.yard_sn = userCookies.get('yard_sn');
    }
    onDownClick() {
        const table = 'officer_import.xlsx';
        window.open(table);
    }
    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        yard_sn: [
            {
                required: true,
                message: '园区sn不能为空',
                trigger: 'blur'
            }
        ],
        file: [
            {
                required: true,
                message: '请上传execl文件'
            }
        ],
        deal_way: [
            {
                required: true,
                message: '请选择处理方式'
            }
        ]
    };

    delWayData: any = [
        { label: '更新导入,当人员存在时更新', value: '1' },
        { label: '新增导入,当人员存在时忽略', value: '2' }
    ];


    get title() {
        return `住户导入`;
    }
}
</script>